<template>
    <div class="home">
        <div class="home-container">
            <search class="fixed-search"></search>
            <div class="home-nav">
                <navigation :content='navContent' :parentWidth='navWidth'></navigation>
            </div>
            <div class="home-nav-content">
                <swiper :options="swiperOption" ref="mySwiper" >
                    <swiper-slide :style="{height:swiperHeight+'rem'}">
                        <mains class="mains-style"></mains>
                    </swiper-slide>
                    <swiper-slide :style="{height:swiperHeight+'rem'}">
                        <good class="mains-style"></good>
                    </swiper-slide>
                    <swiper-slide :style="{height:swiperHeight+'rem'}">
                        <hot class="mains-style"></hot>
                    </swiper-slide>
                    <swiper-slide :style="{height:swiperHeight+'rem'}">
                        <bomb class="mains-style"></bomb>
                    </swiper-slide>
                    <swiper-slide :style="{height:swiperHeight+'rem'}">
                        <exchange class="mains-style"></exchange>
                    </swiper-slide>
                </swiper>
            </div>
        </div>
    </div>
</template>

<script>
import navbarContent from './navbar.js'
import navigation from '../../public/nav'
import search from '../../public/search'
import mains from './main'
import good from './good'
import hot from './hot'
import bomb from './bomb'
import exchange from './exchange'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
    name:'home',
    data(){
        return {
            selected:'',
            navContent:navbarContent,
            navWidth:734,
            swiperHeight:0,
            swiperOption: {
                initialSlide:0,
                direction:'horizontal',
                loop: false,
                speed:300,
                autoHeight:true,
                on:{
                    slideChangeTransitionStart:() => {
                        let realIndex = this.swiperDetail;
                        this.$store.state.homeTabIndex = realIndex;
                    }
                }
            },
            code:''
        }
    },
    methods:{
        getToken(){
            // let that = this;
            // let url = window.location.href;
            // let code = that.getUrlCode(sessionStorage.getItem('temUrl'));
            // let dis = localStorage.getItem('distribution') || '';
            // alert('home page==='+code);
            // if(code){
            //     that.$ajax(that, 'post', that.$api.userJudge, {'code':code, 'distributor_id':dis}, null, function(res){
            //         alert(JSON.stringify(res));
            //         if(res.data['error_code'] == 0){
            //             alert('home success==' + JSON.stringify(res));
            //             // localStorage.setItem('token', res.data.msg);
            //         }else{
            //             alert('home error==='+ JSON.stringify(res));
            //         }
            //     })
            // }else{
            //     alert('home page error==='+code);
            // }
            
            // let temUrl = window.location.href;
            // let url = window.location.search;
            // // 分销商ID
            // let temId = url.split('=')[1] || '';
            // sessionStorage.setItem('distribution', temId);
            // // 获取code
            // that.$ajax(that, 'post', that.$api.userCode, {'url':temUrl}, null, function(res){
            //     if(res.data['error_code'] == 0){
            //         let temCode = res.data['msg'];
            //         window.location.href = temCode;
                    
            //     }else{
            //         that.toast(res.data.msg);
            //     }
            // })
        }
    },
    mounted(){
        let token = localStorage.getItem('token');
        let scale = window.devicePixelRatio;
        this.$store.state.tab = '首页';
        this.swiperHeight = document.documentElement.clientHeight*scale/100;
        //localStorage.setItem('token', '123456');
        // if(token){
        //     return;
        // }else{
        //     this.getToken();
        // }
    },
    activated(){
        this.$store.state.tab = '首页';
    },
    components:{
        navigation,
        mains,
        good,
        hot,
        bomb,
        exchange,
        swiper,
        swiperSlide,
        search
    },
    computed:{
        swiperDetail() {
            return this.$refs.mySwiper.swiper.realIndex;
        },
        nowPage(){
            return this.$store.state
        }
    }
}
</script>

<style lang='less'>
@rem:100rem;

.home{
    width: 100%;
    margin-top: 88/@rem;
    .home-container{
        width: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        .swiper-slide{
            overflow: scroll;
        }
        .fixed-search{
            position: fixed;
            left: 0;
            top: 88/@rem;
            z-index: 999;
            transform: translateZ(0);
        }
        .home-nav{
            width: 100%;
            margin-top: 70/@rem;
            position: fixed;
            transform: translateZ(0);
            left: 0;
            z-index: 999;
            box-sizing: border-box;
            padding: 0 8/@rem;
            background: #f8f8f8;
        }
        .home-nav-content{
            width: 100%;
            margin-top: 70/@rem;
            .mains-style{
                margin-top: 72/@rem;
            }
        }
    }
}
</style>
